<template>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <el-avatar> {{ name }} </el-avatar>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item disabled>{{ name }}</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item @click="clearUserInforMation"
          >清除账号密码</el-dropdown-item
        >
        <el-dropdown-item class="exit" :divided="true" @click="exit"
          >退出登录</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/store";
import { useRouter } from "vue-router";
import cache from "@/utils/cache";

export default defineComponent({
  components: {},
  emits: ["foldChange"],
  setup() {
    const store = useStore();
    const name = computed(() => store.state.loginModule.userInfo.name);
    const router = useRouter();
    const exit = () => {
      cache.deleteCache("token");
      cache.deleteCache("userMenus");
      cache.deleteCache("userInfo");
      router.push("/login");
    };
    const clearUserInforMation = () => {
      cache.deleteCache("name");
      cache.deleteCache("password");
      cache.deleteCache("isKeepPassword");
    };
    return {
      name,
      exit,
      clearUserInforMation,
    };
  },
});
</script>
<style scoped lang="less">
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .exit {
    padding-top: 6px;
    border: 1px solid #e5e5e5 !important;
  }
}
</style>
